<template>
	<view class="page">
		<image :src="company.logo"></image>
		<view style="font-size: 30rpx;">{{company.name}}</view>
		<u--form labelPosition="left" :model="model1" ref="form1" labelWidth="100rpx"
			:labelStyle="{ fontSize: '24rpx', borderRight: 'solid 2rpx #bbb' }">
			<u-form-item label="+86" prop="phone" borderBottom><u--input v-model="model1.phone" placeholder="请输入手机号"
					border="none"></u--input></u-form-item>
			<u-form-item label="密码" prop="number" borderBottom>
				<u-input placeholder="请输入密码" border="none" v-model="model1.number" :password="password">
					<template slot="suffix">
						<u-icon :name='password?"eye-fill":"eye-off"' size='40rpx' @click='password=!password'/>
					</template>
				</u-input>

			</u-form-item>
		</u--form>
		<view class="radio">
	<!-- 		<u-checkbox-group style="flex: 0;" v-model="radio"> <u-checkbox shape="circle"
					name="1"></u-checkbox></u-checkbox-group>
			<view>
				我已经阅读同意《<text>浏览用户协议</text>》刊《<text>隐私协议</text>》
			</view> -->
		</view>
		<view style="position: relative;width: 100%;">
			<u-button :disabled='disabled' @click='login' iconColor="#fff" text="一键登录" color=" #3975c6"></u-button>
			<!-- <view v-if="!radio.length" class="noRadio" @click="noRadio"></view> -->
		</view>
		<view style="position: relative;width: 100%;">
			<u-button :disabled='disabled' @click='jump' text="手机号一键登录"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radio: [],
				disabled: false,
				model1: {
					phone: "",
					number: ""
				},
				password:true,
				rules: {
					'phone': [{
							type: 'string',
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'number': [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					}],

				},
			};
		},
		onReady() {
			this.$refs.form1.setRules(this.rules)
		},
		computed: {
			company() {
				return {
					name: uni.getStorageSync('companyName'),
					logo: uni.getStorageSync('companyLogo'),
				}
			}
		},
		methods: {
			jump() {
				uni.reLaunch({
					url: '/login/index'
				})
			},
			login() {
				this.$refs.form1.validate().then(res => {
					this.disabled = true
					const obj = {
						mobile: this.model1.phone,
						password: this.model1.number
					}
					this.$api_company.Login.Login(obj).then(res => {
						uni.setStorageSync('token', res.data.token);
						this.$api.My.Detail().then(res => {
							uni.setStorageSync('user', res.data);
							uni.reLaunch({
								url: uni.getStorageSync('pageUrl')
							})
						})
						// this.getOpenidAndSession()
					}).catch(err => {
						uni.$u.toast(err.message)
						this.disabled = false
					})
				})
			},
			getOpenidAndSession() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						const loginCode = loginRes.code
						this.$api_company.Login.Session({
							code: loginCode
						}).then(res => {
							uni.setStorageSync('openid', res.data.openid);
						}).catch(err => {})
					},
					fail: (err) => {
						console.log(err, 'fail')
					}
				});
			},
			noRadio() {
				this.$u.toast('请先勾选');
				this.radio=['1']
			}
		}
	}
</script>

<style lang="scss">
	.page {
		height: 60vh;
		color: #010101;
		font-size: 26rpx;
		width: calc(100% - 160rpx);
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		justify-content: space-between;
	}

	image {
		width: 150rpx;
		height: 150rpx;
	}



	.radio {
		text {
			color: #0000ED;
		}

		flex: 0.8;
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.noRadio {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #010;
		z-index: 11;
		top: 0;
		opacity: 0;
	}

	::v-deep .u-form {
		width: 100%;
	}
</style>